<template>
  <view class="page_index" >
    <!-- #ifdef MP -->
    <!-- <view class="mp-header" :style="{ background: mpHeaderColor }">
      
      <view class="sys-head" :style="{ height: statusBarHeight }"></view>
      <view class="serch-box" style="height: 40px">
        <view class="serch-wrapper flex">
          <view class="logo">
            <image src="/static/images/logo-title.png" mode=""></image>
			
          </view>
        </view>
      </view>
    </view> -->
    <!-- #endif -->
	   <!--       减去状态栏的高度 -->
	   <!-- style="background-color: aquamarine;" -->
	    <!-- <view class="mp-header" :style="{ background: mpHeaderColor }"> -->
	    <view class="mp-header" :style="{ background: '#ffffff' }">
		   
	       <view class="sys-head" :style="{ height: statusBarHeight }" ></view>
	       <view class="serch-box" >
	         <view class="serch-wrapper flex">
	           <view class="logo">
	             <image src="/static/images/logo-title.png" mode="widthFix"></image>
				 
	           </view>
	         </view>
	       </view>
	     </view>
	
    <!-- 首页展示 -->
	 <!-- :style="{marginTop:statusBarHeight,paddingTop:'90rpx'}" -->
    <view
      class="page_content"
     
      v-if="navIndex == 0"
    >
	
	<view :style="{ paddingTop: statusBarHeight }" class="heade-zw">
		
	</view>
	
      <!--      <view class="mp-bg"></view>-->
      <!--      currentSwiper-->
      <!-- <image class="mp_bg_img" :src="currentSwiper"></image> -->
      <!--      search-->
      <!-- <view class="search_">
        <view class="search_wrapper flex">
          <navigator
            url="/pages/empower/goods_search/index"
            class="input"
            hover-class="none"
            ><text class="navSearch"></text>请输入搜索内容</navigator
          >
        </view>
      </view> -->
      <!-- banner -->
	 
     <view class="swiper" v-if="imgUrls.length">
        <swiper
          indicator-dots="true"
          :autoplay="true"
          :circular="circular"
          :interval="interval"
          :duration="duration"
          indicator-color="rgba(255,255,255,0.6)"
          indicator-active-color="#fff"
          @change="bindchangeFn"
        >
          <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item @click="swiperitemfun(item)">
				
              
                <image
                  :src="httpUrlFn(item.image)"
                  class="slide-image"
                  lazy-load
                ></image>
              <!-- </navigator> -->
            </swiper-item>
          </block>
        </swiper>
      </view>
     

      <!-- 首发新品 -->
      <view class="shopping_">
		    <!-- v-if="item.channelId!==3" -->
        <view
          class="item_"
          v-for="(item, index) in listRecords"
          :key="index"
          mode="aspectFit"
          @click="shoppingFn(item, index)" 
        >
          <view class="image_">
            <image :src="httpUrlFn(item.image)" mode="aspectFit" />
          </view>
          <view class="info_">
			  <view class="text_ text_name">{{ item.name }}</view>
            <view class="text_ ">别名:{{ item.aliasName }}</view>
			<view class="text_ ">产品类型:{{ item.attribute }}</view>
			<view class="text_ ">生产厂家:{{ item.manufacturer }}</view>
            <view class="sold_number">已售{{ item.sales }}</view>
			<view class="comment_tag">
				<view class="comment_tag_lb" v-if="item.channelId===2">
					<view >
						礼包商品
					</view> 
				</view>
				<view class="commission_" v-if="item.CommissionToggle">
				  <view> 佣金:￥{{ item.CommissionToggle }} </view>
				</view>
			</view>
           
            <view class="money_wrapper">
              <view class="money_" v-if="item.adviseSalePrice">
                <view class="money_1"
                  >￥<text>{{ item.adviseSalePrice }}起</text><text class="back_s">(含税价)</text> </view
                >
                <!-- <view class="money_2">￥{{ item.oriPrice }}</view> -->
              </view>
              <view class="purchase_wrapper" v-if="!item.adviseSalePrice" @tap.stop="gologin"> 点击咨询 > </view>
            </view>
          </view>
        </view>
      </view>
	  
	  
	  
	  
      <u-loadmore
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
        @loadmore="loadNextFn"
      />
      <AuthorizationPopup ref="authRef"></AuthorizationPopup>
	  <view class="go_xy">
	    <view class="go_xy_k" @click="giftFn()">
	        <view>用户协议</view>
	    </view>
	    <view class="go_xy_k" @click="pointsFn()">
	        <view>联系我们</view>
	    </view>
	  </view>
    </view>
    <ls-skeleton :round="true" :skeleton="skeleton" :loading="loading">
    </ls-skeleton>
	<view class="gj_ifom">
		<view class="gwc" @click="gocar">
			<u-icon  size="50" name="/static/user/11.png"></u-icon>
			
		</view>
		<view class="kf">
			<!-- server-fill -->
			<u-icon size="50" name="server-fill"></u-icon>
			
		</view>
	</view>
  </view>
</template>

<script>
import AuthorizationPopup from "@/components/AuthorizationPopup/index";
import { mapGetters } from "vuex";
import { getShopPing } from "@/api/shopping/index";
import { BASE_URL_IMAHE } from "../../../utils/https";
import { bannerList } from "@/api/banner";
import { getHomePage,getGoodsListPage } from "@/api/index/index";

var statusBarHeight = uni.getSystemInfoSync().statusBarHeight?uni.getSystemInfoSync().statusBarHeight + "px":"30rpx";
console.log("uni.getSystemInfoSync()",uni.getSystemInfoSync())

let app = getApp();
export default {
  name: "index.vue",
  // computed: mapGetters(["isLogin"]),
  components: {
    AuthorizationPopup,
  },

  onLoad() {
    var that = this;
    let self = this;
    // #ifdef MP
    // 获取小程序头部高度
    this.navH = app.globalData.navHeight;
	
    console.log(this.navH, "获取小程序头部高度");
    let info = uni.createSelectorQuery().select(".mp-header");
    info
      .boundingClientRect(function (data) {
        self.marTop = data.height;
        self.poTop = Number(data.height) + 84;
      })
      .exec();
    // #endif
    // #ifndef MP
    this.navH = 0;
    // #endif
	
	  this.marTop = (30+88)+"rpx";
	  
	  console.log(" this.listdate.v", this.listdate.v)
	   
  },
  /**
   * 分享当前页面
   */
  onShareAppMessage(e) {
    console.log(e, "分享");
    return {
      title: "一个兴趣社交购物平台",
      imageUrl:
        BASE_URL_IMAHE +
        "file/test/productImage/20230710/285ce91ce9774534b5c57947ca7c96c9.jpg",
      path: `/pages/index/index?parentInviteCode=${
        uni.getStorageSync("phoneNumber") || ""
      }`,
    };
  },
  onShow() {
    // this.bannerList();
    console.log("22");
    let self = this;
    
    if (uni.getStorageSync("token")) {
      this.$refs.authRef.cancel();
    }
    // setTimeout(() => {
    //   if (!uni.getStorageSync("token") && !uni.getStorageSync("modal")) {
    //     //第一次进入弹窗
    //     this.$refs.authRef.showToggle();
    //     uni.setStorageSync("modal", true);
    //   }
    // }, 1000);

    this.userInfoServer = uni.getStorageSync("userInfoServer") || "";
	this.listdate.v=uni.getStorageSync("v")?uni.getStorageSync("v"):''
	this.listdate.userId=uni.getStorageSync("userId")?uni.getStorageSync("userId"):""
	this.form.userId=this.listdate.userId
	this.form.v=this.listdate.v
    // this.getShopPingApi();
    this.listPage();
	this.form.pageNo=1
	this.listRecords=[]
	this.getGoodsList()
  },
  data() {
    return {
      loading: true,
      skeleton: [
        "line-sm*3",
        40,
        "card",
        "circlesm*2",
        "line",
        "card-lg",
        40,
        "news",
        "line-sm*3+square",
      ],
      userInfoServer: "",
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
      },
      statusBarHeight: statusBarHeight,
      marTop: 0,
      navH: "",
      site_name: "", //首页title
      navIndex: 0,
      mpHeaderColor: "#D8E7FC",
      iSshowH: true,
      imgUrls: [],
      //是否采用衔接滑动，即播放到末尾后重新回到开头
      circular: true,
      //自动切换时间间隔
      interval: 3000,
      duration: 500, // 下划线动画时长
      //当前页码
      current: 1,
      //每页数量
      // size: 10,
	  size: 20,
      //列表
      listRecords: [],
      //轮播图index
      currentSwiper: "/static/images/header_bac_1.png",
	  listdate:{
		  v:'',
		  userId:''
	  },
	  form:{
		  v:'',
		  userId:'',
		  pageNo:1,
		  pageSize:10,
		  // {"v":"","userId":"","pageNo":,"pageSize":}
	  },
	  count:0,
	  
    };
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载",this.form.pageNo>this.count,this.form.pageNo,this.count);
    
	if(this.form.pageNo>this.count){
		return
	}
	this.getShopPingApi();
	this.getGoodsList()
  },
  methods: {
	 async getGoodsList(){
		let resgood= await getGoodsListPage(JSON.stringify(this.form))
		
		
		
		if (resgood.result == 0) {
			console.log(resgood.page.list,"resgood.page.list")
				this.count=Math.ceil(resgood.page.count/resgood.page.pageSize)
				 if(this.listRecords.length==0){
					 this.listRecords = resgood.page.list
				 }else{
					 this.listRecords.push(...resgood.page.list)
				 }
				
					 
					  this.form.pageNo++
					  this.status = "nomore";
				
		}
	  },
	  gocar(){
	  		  uni.navigateTo({
	  		    url: `/pages/subpackage/collect/index`,
	  		  });
	  },
    async listPage() {
      // Promise.all([ this.getShopPingApi()]).finally(
      //   () => (this.loading = false)
      // );
	 
	  
	   let res= await getHomePage(JSON.stringify(this.listdate))
	   if (res.result == 0) {
	     this.imgUrls= res.homeBanner
		 
	     uni.hideLoading();
		 uni.setNavigationBarTitle({
		   title: res.websiteTitle,
		 });
		 this.loading = false
	   }
    },

    //banner图 列表
    async bannerList() {
      const res = await bannerList(1);
      if (res.code === 0) {
        this.imgUrls = res.data;
        uni.hideLoading();
      }
    },

    httpUrlFn(item) {
      return  BASE_URL_IMAHE + item ;
    },
	swiperitemfun(item){
		// console.log(item)
		 // image //图片
		 //    jumpType  //跳转类型  1:商品 2:公告 3:外部链接
		 //    content     //内容(如果跳转类型是1则是商品id , 2是富文本格式 , 3是外部链接)
		if(item.jumpType==1){
			uni.navigateTo({
				url:"/pages/subpackage/goods/detail?goodsId="+item.content,
			})
		}
		if(item.jumpType==2){
			app.globalData.data.noticecontent=item.content
			uni.navigateTo({
				url:"/pages/subpackage/notice/index",
			})
		}
		if(item.jumpType==3){
			window.location.href=item.content
		}
	},
    //轮播图
    bindchangeFn(e) {
		console.log(e)
		return
      if (e.detail.current) {
        this.currentSwiper = `/static/images/header_bac_${
          e.detail.current + 1
        }.png`;
        const current = e.detail.current + 1;
        if (current === 1) {
          this.mpHeaderColor = "#D8E7FC";
        } else if (current === 2) {
          this.mpHeaderColor = "#F1E0C9";
        } else if (current === 3) {
          this.mpHeaderColor = "#E4E5E0";
        } else {
          this.mpHeaderColor = "#D8E7FC";
        }
      } else {
        this.currentSwiper = `/static/images/header_bac_1.png`;
        this.mpHeaderColor = "#D8E7FC";
      }
    },
	gologin(){
		if (!uni.getStorageSync("userId")) {
		  // 弹窗告诉用户去登录
		  uni.showModal({
		    title: "温馨提示",
		    content: "此时此刻需要您登录喔~",
		    // showCancel: false,
		    confirmText: "去登录",
		    cancelText: "再逛会",
		    success: (res) => {
		      if (res.confirm) {
		        uni.navigateTo({
		          url: "/pages/empower/mp-weixin",
		        });
		      }
		      
		      
		    },
		  });
				return
		}
	},

    shoppingFn(item, index) {
      // console.log(item, "item 商品");
      // console.log(index, "index");
	  // return
	 
	  
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?goodsId=${item.id}&pic=${
          item.pic
        }&prodName=${item.prodName}&price=${item.price}&oriPrice=${
          item.oriPrice
        }&vrPayUsers=${item.vrPayUsers}&commission=${
          item.commission
        }&properties=${item.properties}&content=${encodeURIComponent(
          JSON.stringify(item.content)
        )}&channelId=${item.channelId}&itemType=${item.channelId}`,
      });
    },

    //礼包
    giftFn() {
      console.log("点击了礼包");
      uni.navigateTo({
        url: "/pages/subpackage/service/index",
      });
    },
    //积分
    pointsFn() {
      console.log("点击了积分");
      uni.navigateTo({
        url: "/pages/subpackage/contact/index",
      });
    },

    //普通、商品列表
    async getShopPingApi() {
      this.status = "loading";
      const params = {
        current: this.current,
        size: this.size,
        channelId: '',
      };
    
	// setTimeout(() => {
	//   this.status = "loadmore";
	// }, 800);
	
	setTimeout(() => {
	  this.status = "nomore";
	}, 800);
	return;

    },

    //点击组件触发上拉加载
    loadNextFn() {
      console.log("点击组件触发上拉加载2123");
      // this.getShopPingApi();
    },
  },
};
</script>

<style scoped lang="scss">
.page_index {
  background-color: #F5F5F5 !important;
  min-height: 100vh;
  padding-bottom: rpx(16);
  　　padding-bottom: constant(safe-area-inset-top);  // 顶部安全区
  　　padding-bottom: env(safe-area-inset-top);    // 顶部安全区
  　　padding-bottom: constant(safe-area-inset-bottom);  // 底部安全区
  　　padding-bottom: env(safe-area-inset-bottom);    // 底部安全区
  　　box-sizing: content-box;
}

/* #ifdef MP */
.mp-header {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  /* #ifdef H5 */
  padding-bottom: rpx(20);
  /* #endif */
  //background-color: $theme-color;
  .sys-head {
    //background: pink;
  }
  .serch-box {
    //background: pink;
  }
  .serch-wrapper {
    height: 100%;
    align-items: center;

    .logo {
		display: flex;
		justify-content: center;
		width: rpx(200);
		height: rpx(60);
      image {
        width: rpx(200);
        height: rpx(60);
        vertical-align: middle;
        // margin-left: rpx(16);
      }
    }

    .input {
      display: flex;
      align-items: center;
      /* #ifdef MP */
      width: rpx(305);
      /* #endif */
      height: rpx(50);
      padding: 0 0 0 rpx(30);
      background: rgba(247, 247, 247, 1);
      border: 1px solid rgba(241, 241, 241, 1);
      border-radius: rpx(29);
      color: #bbbbbb;
      font-size: rpx(28);

      .iconfont {
        margin-right: rpx(20);
      }
    }
  }
}

.mp-bg {
  position: absolute;
  left: 0;
  /* #ifdef H5 */
  top: rpx(49);
  /* #endif */
  width: 100%;
  //background: linear-gradient(180deg, #e93323 0%, #f5f5f5 100%, #751a12 100%);
  // border-radius: 0 0 30rpx 30rpx;
}
.mp_bg_img {
  width: 100%;
  vertical-align: middle;
  position: absolute;
  left: 0;
  /* #ifdef H5 */
  top: rpx(49);
  z-index: -99;
  /* #endif */
}

/* #endif */

.heade-zw{
	width: 100%;
	height: rpx(60);
}
// h5
.mp-header {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  //background-color: $theme-color;
  .sys-head {
    //background: pink;
  }
  .serch-box {
    //background: pink;
	height: rpx(44);
  }
  
  .serch-wrapper {
    height: 100%;
    align-items: center;

    .logo {
		display: flex;
		justify-content: center;
      image {
        width: rpx(140);
        vertical-align: middle;
        // margin-left: rpx(16);
      }
    }

    .input {
      display: flex;
      align-items: center;
      width: rpx(305);
      height: rpx(50);
      padding: 0 0 0 rpx(30);
      background: rgba(247, 247, 247, 1);
      border: 1px solid rgba(241, 241, 241, 1);
      border-radius: rpx(29);
      color: #bbbbbb;
      font-size: rpx(28);

      .iconfont {
        margin-right: rpx(20);
      }
    }
  }
}

.mp-bg {
  position: absolute;
  left: 0;
  width: 100%;
  //background: linear-gradient(180deg, #e93323 0%, #f5f5f5 100%, #751a12 100%);
  // border-radius: 0 0 30rpx 30rpx;
}
.mp_bg_img {
  width: 100%;
  vertical-align: middle;
  position: absolute;
  left: 0;
}

// cs

.swiper {
  position: relative;
  width: 100%;
  padding: rpx(4) rpx(12) rpx(8);
  border-radius: rpx(5);
  //overflow: hidden;
  /* #ifdef MP */
  z-index: 10;
  /* #endif */
  swiper,
  .swiper-item,
  image {
    width: 100%;
    height: rpx(200);
    border-radius: rpx(5);
  }
}

.search_ {
  position: relative;
  height: rpx(44);
  padding: rpx(6) rpx(12);
  > .search_wrapper {
    .input {
      display: flex;
      align-items: center;
      width: rpx(351);
      height: rpx(32);
      background: #ffffff;
      border-radius: rpx(16);
      font-size: rpx(14);
      font-weight: 400;
      color: #b2b2b2;
      .navSearch {
        background-image: url("../../static/images/search.png");
        background-size: rpx(16) rpx(16);
        background-repeat: no-repeat;
        vertical-align: middle;
        margin-right: rpx(8);
        margin-left: rpx(12);
        width: rpx(16);
        height: rpx(16);
      }
    }
  }
}

.gift_points {
  position: relative;
  background: #ffffff;
  margin: rpx(0) rpx(12) rpx(8);
  padding: rpx(8);
  border-radius: rpx(5);
  display: flex;
  > .item_ {
    position: relative;
    border-radius: rpx(5);
    overflow: hidden;
    flex: 1;
    height: rpx(38);
    &:first-child {
      margin-right: rpx(7);
      background: #ffeded;
    }
    &:last-child {
      background: #fff8ed;
    }
    > image {
      vertical-align: middle;
      left: 0;
      top: 0;
      width: rpx(162);
      height: rpx(78);
    }
    > view {
      position: absolute;
      left: 0;
      top: 0;
    }
    > .item_1 {
		width: 100%;
     height: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
     
      > view:last-child {
		width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        // background: linear-gradient(90deg, #fc7f53 0%, #ffaf94 100%);
        border-radius: rpx(12);
        font-size: rpx(20);
        font-weight: bold;
        color: #000000;
      }
    }

    > .item_2 {
		width: 100%;
     height: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
      
      > view:last-child {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        // background: linear-gradient(90deg, #fc7f53 0%, #ffaf94 100%);
        border-radius: rpx(12);
        font-size: rpx(20);
        font-weight: bold;
        color: #000000;
      }
    }
  }
}

.shopping_ {
  margin: rpx(0) auto;
  display: flex;
  flex-wrap: wrap;
  max-width: rpx(351);
  justify-content: space-between;
  //background: pink;
  > .item_ {
    width: rpx(170);
    display: flex;
    flex-direction: column;
    margin-bottom: rpx(8);
    //background: #ffffff;
    border-radius: rpx(5);
    position: relative;
    // overflow: hidden;	
    > .image_ {
      height: auto;
      background: #fafafa;
      border-top-left-radius: rpx(5);
      border-top-right-radius: rpx(5);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      image {
        vertical-align: middle;
        height: rpx(170);
        width: 100%;
        //width: rpx(98);
        //height: rpx(132);
      }
    }
    > .info_ {
      // position:absolute;
      // bottom: rpx(0);
      // left: 0;
      // right: 0;
      padding: rpx(6) rpx(10) rpx(10);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      background:rgba(255,255,255,0.98);
      border: rpx(1) solid #ffffff;
      //opacity: 0.8;
      > .text_ {
        margin-bottom: rpx(2);
        //width: rpx(150);
        //height: rpx(36);
		width: 100%;
        overflow: hidden;
        // display: -webkit-box;	
        // -webkit-box-orient: vertical;
		white-space: nowrap;
		text-overflow: ellipsis;
        // -webkit-line-clamp: 2; /*最大行数*/
      }
	  >.text_name{
		  font-weight: bold;
	  }
      > .sold_number {
        font-size: rpx(12);
        font-weight: 400;
        color: #888888;
      }
		  
	  > .comment_tag{
		 display: flex;
		 
			 
		  > .comment_tag_lb{
			  display: flex;
			  margin-right: rpx(5);
			  margin-top: rpx(10);
			  > view {
			    min-width: rpx(59);
			    background: rgba(255, 66, 26, 1);
			    border-radius: rpx(2);
			    border: rpx(1) solid #fa5151;
			    font-size: rpx(10);
			    font-weight: 400;
			    color: #FFFFFF;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    padding: rpx(1) rpx(3) rpx(1) rpx(3);
			    margin-bottom: rpx(6);
			  }
		   }
		 
		  > .commission_ {
		    display: flex;
			margin-top: rpx(10);
		    > view {
		      min-width: rpx(59);
		      background: rgba(250, 81, 81, 0.1);
		      border-radius: rpx(2);
		      border: rpx(1) solid #fa5151;
		      font-size: rpx(10);
		      font-weight: 400;
		      color: #fa5151;
		      display: flex;
		      justify-content: center;
		      align-items: center;
		      padding: rpx(1) rpx(3) rpx(1) rpx(3);
		      margin-bottom: rpx(6);
		    }
		  }
		  
	  }
     
      > .money_wrapper {
        display: flex;
        justify-content: space-between;
		flex-wrap: wrap;
        margin-top: rpx(11);
        > .money_ {
          display: flex;
          align-items: center;
		  width: 100%;
		  box-sizing: border-box;
		  
          > .money_1 {
			 
            margin-right: rpx(4);
            font-size: rpx(11);
            font-weight: bold;
            color: #fa5151;
            > text {
              font-size: rpx(15);
            }
			.back_s{
				color: #888888;
				font-size: rpx(8);
				font-weight: normal;
			}
          }
		  
          > .money_2 {
            font-size: rpx(11);
            font-weight: 400;
            color: #b2b2b2;
            text-decoration: line-through;
            margin-top: rpx(5);
          }
        }
        //> .sold_number {
        //  font-size: rpx(12);
        //  font-weight: 400;
        //  color: #888888;
        //}
        > .purchase_wrapper {
          padding: rpx(4) rpx(4);
		  
          // background: rgba(255, 255, 255, 0.6);
          border-radius: rpx(3);
          // border: rpx(1) solid #b2b2b2;
          font-size: rpx(15);
          font-weight: 400;
          color: #fa5151;
        }
      }
    }
  }
}
.gj_ifom{
	padding: rpx(5);
	position: fixed;
	right: rpx(20);
	top: 80vh;
	background-color: white;
	border-radius: rpx(15);
	box-shadow: 0 0 rpx(2) rpx(2) #888888;
}
.go_xy{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.go_xy_k{
	padding: 0 20rpx;
	color: #007aff;
}


</style>
